import React, { useState } from 'react';
import { Modal, View, Button, StyleSheet, TouchableOpacity } from 'react-native';
import { Divider, Text } from 'native-base';

interface DialogConfig {
  title?: string;
  message?: string;
  confirmText?: string;
  cancelText?: string;
  onConfirm?: () => void;
  onCancel?: () => void;
}

let dialogInstance: {
  show: (config: DialogConfig) => Promise<void>;
  hide: () => void;
} | null = null;

const ConfirmDialog: React.FC = () => {
  const [visible, setVisible] = useState(false);
  const [dialogConfig, setDialogConfig] = useState<DialogConfig>({});

  const show = (config: DialogConfig): Promise<void> => {
    return new Promise((resolve, reject) => {
      setDialogConfig({
        ...config,
        onConfirm: resolve,
        onCancel: reject,
      });
      setVisible(true);
    });
  };

  const hide = () => {
    setVisible(false);
  };

  dialogInstance = { show, hide };

  return (
    <Modal transparent={true} visible={visible} animationType="fade">
      <View style={styles.overlay}>
        <View style={styles.dialogBox}>
          <Text style={styles.title} color={'#323233'}>
            {dialogConfig.title || '提示'}
          </Text>
          <Text style={styles.message} fontSize={12} color={'#646566'}>
            {dialogConfig.message || ''}
          </Text>
          <View style={styles.buttonContainer}>
            <TouchableOpacity
              style={styles.buttonContainerBtn}
              onPress={() => {
                hide();
                dialogConfig.onCancel && dialogConfig.onCancel();
              }}
            >
              <Text>{dialogConfig.cancelText || '取消'}</Text>
            </TouchableOpacity>
            <Divider orientation="vertical" mx="0.5" _light={{ bg: '#f3f3f3' }} />
            <TouchableOpacity
              style={styles.buttonContainerBtn}
              onPress={() => {
                hide();
                dialogConfig.onConfirm && dialogConfig.onConfirm();
              }}
            >
              <Text>{dialogConfig.confirmText || '确定'}</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </Modal>
  );
};

export const ShowConfirmDialog = (config: DialogConfig): Promise<void> => {
  if (dialogInstance) {
    return dialogInstance.show(config);
  } else {
    return Promise.reject();
  }
};

const styles = StyleSheet.create({
  overlay: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0.5)' },
  dialogBox: { width: '90%', paddingTop: 20, backgroundColor: '#fff', borderRadius: 12, justifyContent: 'center', alignItems: 'center', overflow: 'hidden' },
  title: { fontSize: 16, fontWeight: 'bold', marginBottom: 10, paddingHorizontal: 20 },
  message: { marginBottom: 20, paddingHorizontal: 20, textAlign: 'center' },
  buttonContainer: { height: 50, flexDirection: 'row', justifyContent: 'space-between', width: '100%', borderTopWidth: 1, borderTopColor: '#f3f3f3' },
  buttonContainerBtn: { width: '50%', justifyContent: 'center', alignItems: 'center' },
});

export default ConfirmDialog;
